<template>
  <div>
    <el-form :model="numberValidateForm"  :inline="true" ref="numberValidateForm" class="demo-ruleForm" style="text-align:center">
      <el-form-item
        prop="code"
        :rules="[
          { required: true, message: '不能为空'}
        ]"
      >
        <el-input type="text" v-model="numberValidateForm.code" placeholder="输入要查找的编号、用户名" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('numberValidateForm')">搜索</el-button>
        <el-button @click="resetForm('numberValidateForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-form label-width="120px">
      <el-form-item label="行业分类:">
        <el-radio-group v-model="radio">
          <el-radio :label="item.id" v-for="(item, index) in type" :key="index">{{item.name}}</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div style="overflow:hidden">
      <div v-for="(val, inx) in phots" :key="inx">
      <section class="photos-items-groups" v-for="(item, inx) in val.img" :key="inx">
          <div class="photos-inner">
            <el-card class="photos-items">
                <div class="photos-pics">
                  <el-image :src="item" :fit="fit" :preview-src-list="[item]">
                    <div slot="placeholder" class="image-slot">
                      加载中<span class="dot">...</span>
                    </div>
                  </el-image>
                  <!-- <img :src="item" @click="showImg(item, val)"> -->
                </div>
                <!-- <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" @click="showImg('https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png', val)"> -->
                <div style="padding: 14px;">
                <div  class="photo_title">{{ val.title }}</div>
                <time class="time">{{ val.created_at }}</time>
                <div>客户名称：{{ val.customer_name}}</div>
              </div>
            </el-card>
          </div>
      </section>
  </div>
    </div>
  <p class="photos-space" v-if="total === 0">暂无数据</p>
  <div class="block" style="text-align: right">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pagesize"
      layout="prev, pager, next"
      :total="total">
    </el-pagination>
  </div>
  </div>
</template>
<script>
import { type, photoList } from '@/api/oa/index.js'
export default {
  data () {
    return {
      radio: 1,
      name: '',
      type: [],
      phots: [],
      pagesize: 2,
      currentPage: 1,
      total: 0,
      numberValidateForm: {
        code: ''
      },
      fit: 'fit',
      dialogVisible: false,
      dialogItem: {
        item: '',
        created_at: '',
        customer_name: '',
        title: ''
      }
    }
  },
  watch: {
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    currentPage () {
      this.photoListFunc()
    },
    pagesize () {
      this.currentPage = 1
      this.photoListFunc()
    },
    radio () {
      this.name = ''
      this.currentPage = 1
      this.photoListFunc()
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.getTypeFunc()
      this.photoListFunc()
    })
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.name = this.numberValidateForm.code
          this.currentPage = 1
          this.photoListFunc()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    handleSizeChange (val) {
      this.pagesize = val
    },
    handleCurrentChange (val) {
      this.currentPage = val
    },
    // 获取行业
    async getTypeFunc () {
      const { data } = await type()
      this.type = data
    },
    async photoListFunc () {
      const params = {
        type_id: this.radio,
        keyword: this.name,
        page: this.currentPage,
        num: this.pagesize
      }
      const { data: { data, total } } = await photoList(params)
      this.numberValidateForm.code = ''
      this.phots = data
      this.phots.forEach(item => {
        const imgArr = item.pics.split(',')
        this.$set(item, 'img', imgArr)
        return item
      })
      this.total = total
      console.log(this.phots)
    }
  }
}
</script>
<style>
.el-image {
  width: 100%;
  height: 100%;
}
.el-image__error {
  width: 100%;
}
.photo_title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.photo-el img {
  max-width: 100%;
}
.photos-space {
  text-align: center;
  font-size:14px;
  color:#999;
  text-align: center;
}
.photos-inner {
  width:20%;
  height:330px;
  float: left;
  padding:10px;
  box-sizing: border-box;
}

.photos-pics {
  width: 100%;
  height: 220px;
}
.photos-pics img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
</style>
